<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  chartId: string
}>()

const initChart = (data: any) => {
  type EChartsOption = echarts.EChartsOption;

  const chartDom = document.getElementById(props.chartId)!
  const myChart = echarts.init(chartDom)
  let option: EChartsOption

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '数据量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  }
  option && myChart.setOption(option)
}

defineExpose({ initChart })
</script>

<template>
  <div :id="chartId" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>
